<template>
   <view>
        <!-- 轮播图区域 -->
        <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
            <!-- 循环渲染轮播图的 item 项 -->
            <swiper-item v-for="(item, i) in swiperList" :key="i">
                <navigator class="swiper-item" :url="'/pages/goods/goods_detail?goods_id=' + item.goods_id">
                    <!-- 动态绑定图片的 src 属性 -->
                    <image :src="item.image_src"></image>
                </navigator>
            </swiper-item>
        </swiper>
   </view>
</template>

<script>
   export default {
      data() {
         return {
            // 1. 轮播图的数据列表，默认为空数组
            swiperList: [],
         };
      },
      created() {
        // 2. 在小程序页面刚加载的时候，调用获取轮播图数据的方法
        this.getSwiperList()
      },
      methods: {
        // 3. 获取轮播图数据的方法
        async getSwiperList() {
         
            const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata')
            console.log('dawdawdawd')
            if (res.meta.status !== 200) {
               return uni.$showMsg()
            }
               
            this.swiperList = res.message
         }
      }
   };
</script>

<style scoped lang="scss">
    swiper {
        height: 330rpx;
        .swiper-item,
        image {
            width: 100%;
            height: 100%;
        }
    }
</style>